<template>
  <view class="Navbar flex flex-row scroll-x">
    <view v-for="item in tabList" :key="item.text" class="tabIconStyle fs_0" @click="setVal(item.value)">
      <text :class="{active:item.value == selectVal}" >
        {{ item.text.length > 8 ? item.text.substring(0, 8) + '...' : item.text }}
      </text>
      <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/activeBot.svg" v-if="item.value == selectVal" class="activeIcon"/>
    </view>
  </view>
</template>
<script>
export default {
  name: "Navbar",
  props: {
    tabList: {
      type: Array,
      default: () => []
    },
    selectVal: String 
  },
  data() {
    return {
      // selectVal: null
    }
  },
  methods:{
    // updateVal(val){
    //   this.selectVal = val
    // },
    setVal(val){
      this.$emit('updateVal', val)
    }
  },
  // created() {
  //   if (this.tabList.length > 0) {
  //     this.selectVal = this.tabList[0].value
  //   }
  // }
}
</script>

<style scoped lang="scss">
.Navbar{
  background-color: #FFFFFF;
  min-height: 30px;
  .tabIconStyle {
    color: #666;
    font-size: 32rpx;
    position: relative;
    margin-right: 46rpx;
    text{
      font-size: 32rpx;
    }
    .active {
      font-size: 36rpx;
      font-weight: bold;
    }

    .activeIcon {
      width: 72rpx;
      height: 50rpx;
      position: absolute;
      top: 24rpx;
      left: 0;
    }
  }
}

</style>